<template>
  <div class="nav-first-container">
    <div class="padding-b-57" id="schedule">
        <van-cell-group>
          <van-cell :title-class="forms.status == 'add'?'left-class':forms.status == 'edit'?'left-class':'left-class-check'" title="日期" 
          :value="forms.status == 'check'?'全天 '+ forms.valueDate:$common.formatTime(forms.valueDate,'Y-M-D')" is-link :border="false" @click="showDate"/>
        </van-cell-group>
        <van-cell-group class="margin-t-10">
          <van-field
            class="flex-column"
            :label-class="forms.status == 'add'?'left-class':forms.status == 'edit'?'left-class':'label-check'"
            :disabled="forms.status == 'check'"
            v-model.trim="forms.message"
            rows="3"
            autosize
            label="内容"
            type="textarea"
            placeholder="输入日程内容"
          />
        </van-cell-group>
        <div class="bottom-btn" v-if="forms.status == 'add' || forms.status == 'edit'">
          <van-button class="btn-radius" type="info" size="large" @click="submits">马上提交</van-button>
        </div>

      <!-- 日期弹出框 -->
      <van-popup v-model="show" position="bottom" :close-on-click-overlay="false" 
      :safe-area-inset-bottom="true">
        <van-datetime-picker
          v-model="forms.currentDate"
          type="date"
          :min-date="forms.minDate"
          @confirm="dateConfirm"
          @cancel="dateCancel"
        />
      </van-popup>
    </div>
  </div>
  
</template>
<script type="text/javascript">
  export default{
    data() {
      return{
        forms:{
          status:"add",//当前页面状态是add or edit or check
          id:"",//日程id
          message:'',
          currentDate: new Date(),
          minDate: new Date(),
          valueDate: this.$common.formatTime(new Date(),'Y-M-D'),
          timeStamp: new Date(),  //reloadView 传的数据
        },
        show: false,
        rightText:"",
      }
    },
    activated(){
      this.forms = {
        status:"add",//当前页面状态是add or edit or check
        id:"",//日程id
        message:'',
        currentDate: new Date(),
        minDate: new Date(),
        valueDate: this.$common.formatTime(new Date(),'Y-M-D'),
        timeStamp: new Date()
      }

      this.forms.status = this.$route.query.status
      this.forms.id = this.$route.query.id

      setTimeout(_ => {
        if(this.forms.status == 'check'){
          this.$bridge.callHandler('navTitle', {title: '日程详情'})
          this.$bridge.callHandler('navRight', {title: '编辑'})
        }else if(this.forms.status == 'add' || this.forms.status == 'edit') {
          this.$bridge.callHandler('navTitle', {title: '增加日程'})
          this.$bridge.callHandler('navRight', {title: ''})
        }

        this.$bridge.registerHandler('navRightClicked',  (data, responseCallback)  => {
          this.forms.status = 'edit'
          responseCallback('edit')
        })
      },500)

      if(this.forms.status == 'check'){
        this.showSchedule()
      }

    },
    mounted() {

    },
    methods:{
      /**
       * 显示时间弹框
       * @return {[type]} [description]
       */
      showDate() {
        if(this.forms.status == 'add' || this.forms.status == 'edit') {
          this.$bridge.callHandler('navKeepView')
          this.show = true
        }
      },
      /**
       * 日期确认按钮
       * @return {[type]} [description]
       */
      dateConfirm(e) {
        this.$bridge.callHandler('cancelNavKeepView')
        this.forms.timeStamp = e
        this.forms.valueDate = this.$common.formatTime(e, 'Y-M-D')
        this.show = false
      },
      /**
       * 日期取消按钮
       */
      dateCancel() {
        this.$bridge.callHandler('cancelNavKeepView')
        this.show = false
      },
      /**
       * 提交按钮
       * @return {[type]} [description]
       */
      submits() {
        if(this.forms.message.trim() == '') {
          this.$toast("请正确输入内容")
        }else {
          if(this.forms.status == 'edit'){
            this.editSubmit()
          } else {
            this.$toast({
              duration: 0, // 持续展示 toast
              forbidClick: true,
              className: 'loading-toast',
              icon: require('../../assets/loading.gif'),
            })
            let config = {
              method: "post",
              url: `${this.$common.basePath}attendance.php`,
              data: {
                do: 'scheduleadd',
                user_id: this.$store.state.userId,
                workdate: this.forms.valueDate,
                content: this.forms.message 
              }
            }
            this.$axios(config).then(res => {
              this.$toast.clear()
              this.$toast({
                type:"success",
                message:'提交成功',
                forbidClick: true,
              })
              setTimeout(_ => {
                this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
              },500)
              setTimeout(_ => {
                this.$bridge.callHandler('close')
              },2000)
            }).catch(err => {
              this.$toast.clear()
            }) 
          }
        }
      },
      /**
       * 编辑提交
       * @return {[type]} [description]
       */
      editSubmit() {
        this.$toast({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../../assets/loading.gif'),
        })
        let config = {
          method: "post",
          url: `${this.$common.basePath}attendance.php`,
          data: {
            do: 'scheduleedit',
            id: this.forms.id,
            workdate: this.forms.valueDate,
            content: this.forms.message 
          }
        }
        this.$axios(config).then(res => {
          this.$toast.clear()
          this.$toast({
            type:"success",
            message:'提交成功',
            forbidClick: true
          })
          setTimeout(_ => {
            this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
          },500)
          setTimeout(_ => {
            this.$bridge.callHandler('close')
          },2000)
        }).catch(err => {
          this.$toast.clear()
        })
      },
      /**
       * 显示日程详情
       * @return {[type]} [description]
       */
      showSchedule() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}attendance.php`,
          data: {
            do: 'schedulelist',
            id: this.forms.id,//日程id
          }
        }
        this.$axios(config).then(res => {
          this.forms.id = res.data.id
          this.forms.message = res.data.content
          this.forms.valueDate = res.data.workdate
        }).catch(err => {

        })
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .padding-b-57 {
    padding-bottom: 57px;
  }
  .nav-content {
    height: calc(100vh - 57px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .van-cell{
    line-height: 35px;
  }
  .left-class{
    font-weight: bold;
    color: #333333;
  }
  .left-class-check{
    font-weight: 600;
    color: #999999;
  }
  .van-cell__right-icon {
    height: 35px;
    line-height: 35px;
  }
  .margin-t-10 {
    margin-top: 10px;
  }
  .bottom-btn{
    width: calc(100vw - 30px);
    padding: 3px 15px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    text-align: center;
    z-index: 5;
  }
  .flex-column{
    display: flex;
    flex-direction: column;
  }
  .btn-radius{
    border-radius: 5px;
  }
</style>
<style type="text/css" lang="less">
  #schedule{
    .van-field__label{
      font-weight: bold;
      color: #333333;
    }
    .label-check{
      font-weight: bold;
      color: #999999;
    }
  }
</style>